<template>
	<view class="content submitC">
		<view class="submit-info1 boxS">
			<view class="info1-item flex-between">
				<view class="info1-left font30">
					<text class="info-default">*</text>
					<text>部门</text>

				</view>
				<view class="info1-right">
					{{userInfo.ou_name}}
				</view>
			</view>
			<view class="info1-item flex-between">
				<view class="info1-left">
					<text class="info-default">*</text>
					<text>申请人姓名</text>
				</view>
				<view class="info1-right">
					{{userInfo.user_name}}
				</view>
			</view>
		</view>
		<view class="submit-info2 boxS">
			<picker class="info2-item" @change="bindPickerChange" range-key="name" :value="index" :range="personList">
				<view class="flex-between">
					<view class="info2-left">
						<text class="info-default">*</text>
						<text>销假班次</text>
					</view>
					<view class="info2-right flex-right">
						<text
							:style="reprotObj.name!=''?'color:#000':''">{{reprotObj.name!=''?reprotObj.name:'请选择'}}</text>
						<image src="../../static/img/more-ico2.png" mode=""></image>
					</view>
				</view>
			</picker>
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>开始时间</text>
				</view>
				<view class="info2-right flex-right" @tap="openTime('start')">
					<text :style="startTime!=''?'color:#000':''">{{startTime!=''?startTime:'请选择'}}</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>
			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>结束时间</text>
				</view>
				<view class="info2-right flex-right" @tap="openTime('end')">
					<text :style="endTime!=''?'color:#000':''">{{endTime!=''?endTime:'请选择'}}</text>
					<image src="../../static/img/more-ico2.png" mode=""></image>
				</view>
			</view>

			<view class="info2-item flex-between">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>时长 (天)</text>
				</view>
				<view class="info2-right flex-right">
					<input type="text" :value="calTime" :disabled="true" placeholder="选择时间后自动计算" />
				</view>
			</view>

			<view class="info2-item">
				<view class="info2-left">
					<text class="info-default">*</text>
					<text>销假事由</text>
				</view>
				<view class="info2-right flex-right" style="width: 100%;">
					<textarea :value="textInput" @input="inputText" placeholder="请输入销假事由" style="color: #000000;" />
				</view>
			</view>
		</view>

		<view class="submit-info3 boxS" style="padding-right: 20%;">
			<uni-file-picker limit="3" title="(最多可上传3张)" :auto-upload="false" @select="select" @progress="progress"
				@delete="deletes" />
		</view>


		<!-- 流程 -->
		<view class="detail-processN boxS">
			<view class="process-title">
				<text class="font30">流程</text>
			</view>
			<view class="process-list">
				<block v-for="(iPrev,index1) in processList" :key="index1">
					<view class="process-item flex-between">
						<view class="process-left flex-left">
							<view class="process-dian"></view>
							<view class="process-text">
								<text class="font28">{{iPrev.process_name}}</text>
								<text class="font24">{{iPrev.examine_member.length}}人协同审批</text>
							</view>
						</view>
						<view class="process-right">
							<view class="flex-right" :style="{'width':iPrev.width,'min-width':'100%'}">
								<block v-for="(item,index2) in iPrev.examine_member" :key="index2">
									<view class="process-people flex-right">
										<view class="process-add">
											+
										</view>
										<view class="people-cont">
											<image :src="!item.cover?'../../static/img/photo.png':item.cover"></image>
											<view class="process-name">
												<text class="font24">{{item.user_name}}</text>
											</view>
										</view>
									</view>
								</block>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>

		<!-- 操作 -->
		<view class="detail-btn boxS flex-between">
			<view class="btn1 font32" hover-class="btns" @click="submitInfo">
				提交
			</view>
		</view>

		<w-picker :visible.sync="shortTermVisible" startYear="2017" endYear="2029" :value="nowTime" :current="false"
			fields="minute" @confirm="onConfirm($event,'date1')" @cancel="onCancel" :disabled-after="false"
			ref="shortTerm"></w-picker>



		<lzLoading :showloading='showLoading'></lzLoading>
	</view>
</template>

<script>
	import lzLoading from '@/components/lz-loading/lz-loading.vue';
	export default {
		components: {
			lzLoading
		},
		data() {
			return {
				index: '',
				value: '',
				shortTermVisible: false,
				result: {
					result: ""
				},
				sTime: '',
				startTime: '',
				endTime: '',
				textInput: '', //事由

				typeid: '', //申请id
				processList: '', //审批列表 
				showLoading: false,

				calTime: '', // 时长
				userInfo: {},
				imgList: [], //图片列表
				successor_id: '', //接替人id 接替人名字
				successor_name: '', //接替人名字
				reprotObj: {
					name: ''
				},
				personList: [],
			};
		},
		computed: {
			nowTime() {
				return this.$util.formatTime('now', 'Y-M-D h:m')
			},
			// userInfo(){
			// 	return uni.getStorageSync("USERINFO")
			// }
		},

		onLoad(options) {
			this.typeid = options.id
		},
		onShow() {
			this.userInfo = uni.getStorageSync("USERINFO");

			this.$api.getTimeCard({
				id: this.userInfo.id
			}, true, (res) => {
				this.personList = res.list.map(e => ({
					...e,
					name: `${e.start_time.substr(0,16)} - ${e.end_time.substr(0,16)} ${e.type_name}`
				}))
			})
			Promise.all([this.getProcess()]).then((t) => {
				let sett = setTimeout(() => {
					this.showLoading = false
				}, 500)
			}).catch(() => {
				this.showLoading = false
			})
		},

		methods: {
			bindPickerChange(e) {
				console.log(e);
				this.reprotObj = this.personList[e.detail.value]
				// this.successor_id = this.personList[e.detail.value]?.user_id
				// this.successor_name = this.personList[e.detail.value]?.user_name
				// this.name = this.personList[e.detail.value]?.name
			},
			//表单提交
			submitInfo() {
				console.log(this.textInput)
				if (this.startTime == '') {
					uni.showToast({
						title: "请选择开始时间",
						icon: "none"
					})
					return
				}
				if (this.endTime == '') {
					uni.showToast({
						title: "请选择结束时间",
						icon: "none"
					})
					return
				}
				if (this.textInput == '') {
					uni.showToast({
						title: "请输入销假事由",
						icon: "none"
					})
					return
				}

				uni.showLoading({
					title: "提交中"
				})
				this.$api.uploadFile(this.imgList, (resoult) => {
					//表单提交
					this.$api.addApplyFlow({
						start_time: this.startTime,
						end_time: this.endTime,
						approve_type_id: this.typeid,
						reason: this.textInput,
						image: JSON.stringify(resoult),
						approve_type_id: "16",
						apply_id: this.reprotObj.id
					}, true, (res) => {
						uni.showToast({
							title: '提交成功',
						})
						let sett = setTimeout(() => {
							uni.navigateBack()
							clearTimeout(sett)
						}, 1000)
					})
					uni.hideLoading()
				})

				// 
			},

			//获取审批流程
			getProcess() {
				return new Promise((resolve, reject) => {
					this.$api.getProcess({
						approve_type_id: 16,
						day: this.calTime,
					}, true, (res) => {
						for (let i in res.process) {
							res.process[i].width = (res.process[i].examine_member.length * 1 * 160 - 100) +
								'rpx'
						}
						this.processList = res.process
						resolve("success")
					})
				})
			},

			//文字输入
			inputText(e) {
				this.textInput = e.detail.value
			},
			//图片上传成功
			select(res) {
				this.imgList.push(...res.tempFilePaths)

			},
			//移除图片
			deletes(res) {
				this.imgList.splice(res.tempFilePath, 1)
			},
			//图片上传进度
			progress(e) {
				console.log('上传进度', e)
			},
			//打开时间选择
			openTime(val) {
				if (!this.reprotObj.start_time) {
					uni.showToast({
						title: '请选择销假班次',
						icon: 'none',
						duration: 2500
					})
				} else {

					this.shortTermVisible = true
					this.sTime = val;
				}

			},
			onConfirm(res, type) {
				this.result = res;

				if (this.sTime == 'start') {
					if (Date.parse(res.result) < Date.parse(this.reprotObj.start_time) || Date.parse(res.result) > Date
						.parse(this.reprotObj.end_time)) {
						uni.showToast({
							title: '销假开始时间不能超出休假时间',
							icon: 'none',
							duration: 2500
						})
					} else {
						this.startTime = res.result;
					}

				} else {
					if (Date.parse(res.result) > Date.parse(this.reprotObj.end_time)) {
						uni.showToast({
							title: '销假开始时间不能大于休假时间',
							icon: 'none',
							duration: 2500
						})
					} else {
						this.endTime = res.result
					}
				}
				this.calculationTime()
			},
			onCancel() {

			},

			// 时间计算
			calculationTime() {
				if (this.startTime != '' && this.endTime != '') {
					// let stime = new Date(this.startTime).getTime()
					// let etime = new Date(this.endTime).getTime()
					// let cal = Math.round((etime - stime) / (1000 * 60 * 60 * 24))
					// cal>0?this.calTime = cal:this.calTime = ''
					this.$api.getDuration({
						start_time: this.startTime,
						end_time: this.endTime
					}, true, (res) => {
						this.calTime = res.work_day;
						// this.getProcess();
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		.submitC {
			padding-top: 30rpx;

			.info-default {
				color: red;
				margin-right: 5rpx;
			}

			.submit-info1 {
				background: #fff;
				padding: 15rpx 4%;

				.info1-item {
					padding: 15rpx 0;

					.info1-left {
						font-weight: 500;
						color: #454545;
					}

					.info1-right {
						textarea {
							background: #FAFAFA;
							width: 100%;
							padding: 30rpx;
							width: 92%;
							margin-top: 20rpx;
							min-height: 100rpx;
							border-radius: 10rpx;
							height: auto;
							color: #000000;
						}
					}

				}
			}

			.submit-info2 {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;

				.info2-item {
					padding: 30rpx 0;
					border-bottom: 1rpx solid #E6E6E6;

					&:last-child {
						border: none;
					}

					.info2-left {
						font-weight: 500;
						color: #454545;
					}

					.info2-right {
						width: 72%;
						color: #ABABAB;

						image {
							width: 12rpx;
							height: 19rpx;
							margin-left: 20rpx;
						}

						input {
							width: 100%;
							text-align: left;
							color: #000;
						}

						textarea {
							background: #FAFAFA;
							width: 100%;
							padding: 30rpx;
							width: 92%;
							margin-top: 20rpx;
							min-height: 100rpx;
							border-radius: 10rpx;
							height: auto;
						}
					}
				}
			}

			.submit-info3 {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;
				padding-bottom: 30rpx;

				.info3-title {
					padding: 30rpx 0;
					font-weight: bold;
					color: #454545;

					text {
						&:last-child {
							font-weight: 500;
							color: #787878;
							margin-left: 15rpx;
						}
					}
				}

				.info3-item {
					width: 140rpx;
					height: 140rpx;
					border: 1rpx solid #E6E6E6;
					border-radius: 7rpx;
					margin-left: 40rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info3-upload {
					width: 140rpx;
					height: 140rpx;
					background: #FAFAFA;
					border: 1rpx solid #E6E6E6;
					border-radius: 7rpx;
					text-align: center;

					image {
						margin: auto;
						width: 43rpx;
						height: 43rpx;
					}

					text {
						display: block;
						color: #008AFF;
					}
				}
			}

			.detail-process {
				margin-top: 30rpx;
				background: #fff;
				padding: 0 4%;
				align-items: flex-start;
				padding-bottom: 150rpx;

				.process-title {
					padding: 30rpx 0;
				}

				.process-item {
					padding-bottom: 80rpx;
					position: relative;

					&:after {
						position: absolute;
						top: 100rpx;
						left: 40rpx;
						content: "";
						width: 3rpx;
						height: 60rpx;
						background: #E6E6E6;
						border-radius: 1rpx;
					}

					&:last-child {
						padding-bottom: 30rpx;

						&:after {
							background: none;
						}
					}

					.item-img {
						width: 88rpx;
						height: 88rpx;
						border-radius: 7rpx;
						margin-right: 30rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.item-name {
						font-weight: bold;
						color: #454545;

						text {
							display: block;
							width: 100%;

							&:last-child {
								font-weight: 500;
								color: #454545;
								margin-top: 10rpx;
							}
						}
					}

					.item-state {
						margin-top: 20rpx;
					}

					.item-right {
						color: #ABABAB;
					}
				}
			}

			.detail-processN {
				margin-top: 30rpx;
				background: #fff;

				align-items: flex-start;
				padding-bottom: 170rpx;

				.process-title {
					padding: 30rpx 4%;
					font-weight: bold;
					color: #454545;
				}

				.process-item {
					padding: 30rpx 4%;
					position: relative;
					border-bottom: 1rpx solid #eee;

					&:before {
						content: "";
						position: absolute;
						top: 0;
						left: 40rpx;
						width: 3rpx;
						height: 50%;
						background: #008AFF;
					}

					&:after {
						content: "";
						position: absolute;
						bottom: 0;
						left: 40rpx;
						width: 3rpx;
						height: 50%;
						background: #008AFF;
					}

					&:first-child {
						padding-top: 0;

						&:before {
							display: none;
						}
					}

					&:last-child {
						border-bottom: none;
						padding-bottom: 0;

						&:after {
							display: none;
						}
					}

					.process-left {
						width: 30%;
						color: #454545;

						.process-dian {
							width: 20rpx;
							height: 20rpx;
							border-radius: 50%;
							background: #008AFF;
							margin-right: 25rpx;
						}

						.process-text {
							text {
								display: block;

								&:last-child {
									color: #454545;
									margin-top: 7rpx;
								}
							}
						}
					}

					.process-right {
						width: 70%;
						overflow-x: scroll;
						overflow-y: hidden;
						text-align: right;

						image {
							width: 88rpx;
							height: 88rpx;
							border-radius: 10rpx;
						}

						.process-name {
							line-height: 25rpx;
							text-align: center;
							color: #454545;
							margin-top: -5rpx;
						}

						.process-add {
							font-size: 40rpx;
							font-weight: blod;
							margin-top: -35rpx;
							padding: 0 15rpx;
							color: #454545;
						}

						.process-people {
							&:first-child {
								.process-add {
									display: none;
								}
							}
						}
					}
				}
			}

			.detail-btn {
				position: fixed;
				bottom: 0;
				left: 0;
				width: 92%;
				padding: 30rpx 4%;
				background: #fff;

				.btn1 {
					width: 100%;
					background: #008AFF;
					border-radius: 44rpx;
					text-align: center;
					font-weight: bold;
					color: #FFFFFF;
					padding: 20rpx 0;
				}
			}
		}
	}
</style>
